<template>
  <div>
    <div><h1>流程</h1></div>
    <div class="process_one">
      <el-form ref="form" :model="form">
        <el-form-item label="选择流程">
          <el-select v-model="form.proname" placeholder="请选择活动区域">
            <el-option v-for="(item,i) in prolist" :key="i"
            :label="item.proname"
            :value="item.proname"
            ></el-option>
          </el-select>
        </el-form-item>
        
        <!-- --- -->
        
          <el-form-item label="活动时间">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.prodate"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
          </el-form-item>
        
        </el-form>

        
      
      <!--  ------- -->
      <el-form ref="form1" :model="form1">
        <el-form-item label="选择节点">
          <el-select v-model="form1.nodename" placeholder="请选择节点">
            <el-option 
             v-for="(item,i) in nodelist" :key="i"
             :label="item.nodename"
             :value="item.nodename"
            ></el-option>
            
          </el-select>
        </el-form-item>
      </el-form>
      <!-- ------ -->
      <el-form ref="form1" :model="form2">
        <el-form-item label="选择员工">
          <el-select v-model="form2.yname" placeholder="员工">
            <el-option 
             v-for="(item,i) in ylist" :key="i"
             :label="item.yname"
             :value="item.yname"
            ></el-option>
            
          </el-select>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="ljlj">立即创建</el-button>
        <el-button>取消</el-button>
      </div><br><br><br>
      <div>
        <el-button @click="tiao">查看我发起的</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "process",
  data() {
    return {
      prolist:[],
      nodelist:[],
      ylist:[],
      form: {
        proname:'',
        prodate:'',
      },
      form1:{
        nodename:'',
      },
      form2:{
        yname:'',
      }
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {
    this.showprocess();
    this.shownode();
    this.showyuangong();
  },

  methods: {
    showprocess(){
      this.axios.get('http://127.0.0.1:8000/proces/v1/showprocess/').then(res=>{
        if (res.data.code ==200) {
          this.prolist = res.data.data
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    shownode(){
      this.axios.get('http://127.0.0.1:8000/proces/v1/shownode/').then(res=>{
        if (res.data.code == 200) {
          this.nodelist = res.data.data
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    showyuangong(){
      this.axios.get('http://127.0.0.1:8000/proces/v1/showyuangong/').then(res=>{
        if (res.data.code == 200) {
          this.ylist = res.data.data
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    tiao(){
      this.$router.push('/faqi')
    },
    ljlj(){
      alert('添加失败')
    }
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style>
.process_one {
  width: 50%;
  padding-left: 25%;
  padding-top: 7%;
}
</style>
